<template>
	<div>
		<a-form :form="form">
		<a-form-item v-for="(item, i) in data.data" :key="i" :label="item.Name">
			<a-input
				v-if="item.FieldType == 1"
				@change="e => inputChange(e, item.ID)"
				v-decorator="[
					item.ID,
					{ rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }, { validator: rules[item.ID] ? rules[item.ID].validator : '' }] }
				]"
			/>
			<a-input
				v-if="item.FieldType == 2"
				@change="e => inputChange(e, item.ID)"
				type="textarea"
				:auto-size="global.textareaHeight"
				v-decorator="[
					item.ID,
					{ rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }, { validator: rules[item.ID] ? rules[item.ID].validator : '' }] }
				]"
			/>
			<a-input
				v-if="item.FieldType == 3"
				@change="e => inputChange(e, item.ID)"
				type="number"
				v-decorator="[
					item.ID,
					{
						rules: [
							{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' },
							{ validator: rules[item.ID] ? rules[item.ID].validator : intValidator }
						]
					}
				]"
			/>
			<a-input
				v-if="item.FieldType == 4"
				@change="e => inputChange(e, item.ID)"
				type="number"
				:step="0.01"
				v-decorator="[
					item.ID,
					{ rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }, { validator: rules[item.ID] ? rules[item.ID].validator : '' }] }
				]"
			/>
			<!-- {{ JSON.stringify(rules) }} -->
			<a-upload
				v-if="item.FieldType == 5 || item.FieldType == 6"
				v-decorator="[item.ID, { rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }] }]"
				:accept="item.FieldType == 5 ? '' : 'image/*'"
				:action="requestUrl + '/Common/DoUploadFile?type=file'"
				list-type="picture-card"
				:file-list="fileList[item.ID]"
				@preview="handlePreview"
				:before-upload="e => beforeUploadfile(e, item.ID)"
				@change="e => handleChange(e, item.ID)"
			>
				<div>
					<a-icon type="plus" />
					<div class="ant-upload-text">Upload</div>
				</div>
			</a-upload>
			<a-date-picker
				v-if="item.FieldType == 7"
				@change="e => dataChange(e, item.ID, 'data')"
				v-decorator="[item.ID, { rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }] }]"
			/>
			<a-time-picker
				v-if="item.FieldType == 8"
				@change="e => dataChange(e, item.ID, 'time')"
				v-decorator="[item.ID, { rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }] }]"
			/>
			<a-radio-group
				name="radioGroup"
				v-if="item.FieldType == 9"
				@change="e => radioChange(e, item.ID)"
				v-decorator="[item.ID, { rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }] }]"
			>
				<a-radio :value="radioitem" v-for="(radioitem, radioindex) in item.Regular.split(',')">{{ radioitem }}</a-radio>
			</a-radio-group>
		</a-form-item>
		</a-form>
	</div>
</template>

<script>
	import moment from 'moment';
export default {
	props: {
		data: Object
	},
	watch: {
		data: {
			handler(newdata, olddata) {
				let that = this
				let list = newdata.data
				setTimeout(function() {
					for (var i = 0; i < list.length; i++) {
						if (list[i].FieldType == 8) {
							that.form.setFieldsValue({
								[list[i].ID]: list[i].Value.indexOf('2020-10-10') > -1 ? list[i].Value : '2020-10-10 ' + list[i].Value
							});
						} else {
							that.form.setFieldsValue({
								[list[i].ID]: list[i].Value
							});
						}
						if (list[i].FieldType == 5 || list[i].FieldType == 6) {
							that.fileList = { ...that.fileList, [list[i].ID]: [] };
						}
					}
					for (let i in that.fileList) {
						for (let n = 0; n < list.length; n++) {
							if (list[n].ID == i) {
								let arr = list[n].Value.split(',');
								for (let m = 0; m < arr.length; m++) {
									if (arr[m]) {
										that.fileList[i].push({ uid: m, url: that.requestUrl + arr[m].split('|')[1], name: arr[m].split('|')[0], status: 'done' });
									}
								}
							}
						}
					}
				}, 200);
			},
			deep: true
		}
	},
	data() {
		return {
			rules: {},
			fileList: {},
			requestUrl:this.global.requestUrl,
			form: this.$form.createForm(this, {
				name: 'form1'
			}),
		};
	},
	mounted() {},
	methods: {
		moment,
		allintValidator(rule, value, callback) {
			let pattern = /(^-?[1-9]\d*$)/;
			if (value && !pattern.test(value)) {
				callback('请输入整数');
			} else {
				callback();
			}
			callback();
		},
		intValidator(rule, value, callback) {
			let pattern = /(^[1-9]\d*$)/;
			if (value && !pattern.test(value)) {
				callback('请输入正整数');
			} else {
				callback();
			}
			callback();
		},
		handlePreview(file) {
			if (file.url) {
				this.previewImage = file.url;
			} else {
				this.previewImage = this.requestUrl + file.response.url;
			}
			window.open(this.previewImage, '_blank')
		},
		beforeUploadfile(file,name){
			const isLt10M = file.size / 1024 / 1024 < 10;
			if (!isLt10M) {
				this.fileList[name] = this.fileList[name].splice(this.fileList[name].length-1,1)
				this.$message.error('文件大小不能超过10M!');
			}
			return isLt10M;
		},
		handleChange(info, name) {
			if (!info.file.status) {
				return false;
			}
			let { fileList } = info;
			const status = info.file.status;
			if (status === 'done') {
				if (info.file.response.code == 0) {
					this.$message.success(info.file.response.msg);
					this.fileList[name] = [...fileList]; //重点
					let str = ''
					let arr = []
					for(let i=0;i<this.fileList[name].length;i++){
						if (this.fileList[name][i].url) {
							if (this.fileList[name][i].url.indexOf(this.requestUrl) > -1) {
								arr.push(this.fileList[name][i].name + '|' + this.fileList[name][i].url.substring(this.requestUrl.length));
							}else{
								arr.push(this.fileList[name][i].name + '|' + this.fileList[name][i].url);
							}
						} else {
							arr.push(this.fileList[name][i].response.fileName + '|' + this.fileList[name][i].response.url);
						}
					}
					str = arr.join(',')
					this.$emit('tap', name, str);
				} else {
					this.$message.error(info.file.response.msg);
					this.fileList[name] = this.fileList[name].splice(this.fileList[name].length - 1, 1);
				}
			}
			if(status==='removed'){
				this.fileList[name] = [...fileList]; //重点
				console.log(this.fileList[name])
				let str = ''
				let arr = []
				for(let i=0;i<this.fileList[name].length;i++){
					if (this.fileList[name][i].url) {
						if (this.fileList[name][i].url.indexOf(this.requestUrl) > -1) {
							arr.push(this.fileList[name][i].name + '|' + this.fileList[name][i].url.substring(this.requestUrl.length));
						}else{
							arr.push(this.fileList[name][i].name + '|' + this.fileList[name][i].url);
						}
					} else {
						arr.push(this.fileList[name][i].response.fileName + '|' + this.fileList[name][i].response.url);
					}
				}
				str = arr.join(',')
				this.$emit('tap', name, str);
			}
			this.fileList[name] = [...fileList]; //重点
		},
		dataChange(e, name, type) {
			let date = moment(e).format('YYYY-MM-DD HH:mm:ss');
			if (type == 'data') {
				if (e) {
					let time = moment(e).format('YYYY-MM-DD HH:mm:ss');
					this.$emit('tap', name, time);
				} else {
					this.$emit('tap', name, '');
				}
			} else {
				if (e) {
					let time = moment(e).format('HH:mm:ss');
					this.$emit('tap', name, time);
				} else {
					this.$emit('tap', name, '');
				}
			}
		},
		radioChange(e, name) {
			this.$emit('tap', name, e.target.value);
		},
		inputChange(e, name) {
			this.$emit('tap', name, e.target.value);
		},
		// dataChange(e) {
		// 	this.$emit('tap', this.name, e);
		// },
		resetFields(val, type) {
			if (type == 'upload') {
				this.fileList = val;
			} else {
				this.value = val;
			}
		}
	}
};
</script>

<style lang="less" scoped></style>
